<template>
	<view class="form_view">
		<view class="item">
			<uv-input placeholder="请输入新手机号" border="none">
				<template v-slot:prefix>
					<view class="label">新手机号：</view>
				</template>
			</uv-input>
		</view>
		<view class="item">
			<uv-input placeholder="请输入短信验证码" border="none">
				<template v-slot:prefix>
					<view class="label">短信验证码：</view>
				</template>

				<template v-slot:suffix>
					<uv-code :seconds="60" ref="codeRef" @change="codeChange"></uv-code>
					<view class="get_code" @tap="getCode">{{tips}}</view>
				</template>
			</uv-input>
		</view>
	</view>
	<view class="submit">
		<view class="btn">确认修改</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const codeRef = ref(),
		tips = ref('');
	const codeChange = (text) => {
		tips.value = text;
	}
	const getCode = () => {
		if (!codeRef.value.canGetCode) return;
		codeRef.value.start();
	}
</script>

<style lang="scss" scoped>
	.form_view {
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			height: 120rpx;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			align-items: center;

			.label {
				width: 168rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
			}

			.get_code {
				width: 200rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;

				color: #2282FC;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 100rpx;
				border: 1rpx solid #2282FC;
			}
		}
	}

	.submit {
		padding: 120rpx 60rpx 0;
		box-sizing: border-box;
		.btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 600;
			background: #2282FC;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 92, 255, 0.3);
			border-radius: 15rpx;
		}
	}
</style>